<template>
    <div class="app-container">
        <div class="dialogbox-content">
            <div class="dialogbox-content-left" @click="showEmojiList = false">
                <a-spin :tip="$t('basics.jiazaizhong')">
                    <!-- <div class="content-left-header">
                        <span @click="refresh">刷新</span>
                    </div> -->
                    <div
                        class="text-[18px] pb-[20px] flex"
                        style="justify-content: space-between"
                    >
                        Message
                        <a-button
                            type="primary"
                            class="ml-3 fr"
                            @click="importAcc"
                        >
                            {{ $t('basics.daochuyouhuifuduihua') }}
                        </a-button>
                    </div>
                    <!-- <div class="content-left-search"> -->

                    <!-- <a-input-number v-model="shertop" allow-clear hide-button @clear="sherhchange">
                  <template #prefix>
                    <icon-search />
                  </template>
                </a-input-number> -->
                    <!-- <img src="@/assets/images/change.png" alt="" style="margin-left: 12px;cursor: pointer; width: 30px; height: 30px;position: relative; top: 3px" @click="sherhchange"/> -->
                    <!-- </div> -->
                    <div class="content-left-conversation">
                        <div class="w100 h-auto relative">
                            <div
                                style="position: relative"
                                class="flex serch-input rounded-[10px] items-center"
                            >
                                <img
                                    src="@/assets/images/ic_fenlei_search.png"
                                    class="w-[22px] h-[22px] search-img"
                                    alt=""
                                    @click="sherhchange"
                                />
                                <a-input
                                    style="padding: 6px 30px"
                                    v-model="shertop"
                                    @clear="sherhchange"
                                    @keyup.enter="sherhchange"
                                />
                            </div>
                            <!-- <img
                                    style="
                                        width: 30px;
                                        height: 30px;
                                        margin-left: 10px;
                                    "
                                    class="cursor-pointer"
                                    @click="reLoad"
                                    src="@/assets/images/ic_shuaxin.png"
                                /> -->
                            <!-- =======
 
            <div class="w100 px-[32px] h-auto relative">
              <div
                class="flex bg-[#2E323D] py-[10px] rounded-[15px] items-center"
              >
                <img
                  src="@/assets/images/ic_fenlei_search.png"
                  class="w-[22px] h-[22px]"
                  alt=""
                  style="margin-left: 14px; cursor: pointer"
                  @click="sherhchange"
                />
                <a-input-number v-model="shertop" class="bg-[#2E323D]" />
              </div>
>>>>>>> bcd30122de280bf0a1652519bb1aa9fd8fee37b1 -->

                            <a-tabs
                                :tabBarStyle="{ borderBottom: 'unset' }"
                                v-model="activeName"
                                @tab-click="handleClick"
                                :activeKey="activeKey"
                            >
                                <!-- 群发 -->
                                <a-tab-pane key="first"
                                    ><template #title>
                                        <icon-user-group />
                                        {{ $t('basics.allSend') }}
                                    </template></a-tab-pane
                                >
                                <!-- 会话 -->
                                <a-tab-pane key="second"
                                    ><template #title
                                        ><icon-message />{{
                                            $t('basics.mySend')
                                        }}
                                        <span :class="{ cored: sum > 0 }"
                                            >({{ mychats }}/{{
                                                sum || 0
                                            }})</span
                                        >
                                    </template></a-tab-pane
                                >
                                <!-- 收藏 -->
                                <a-tab-pane key="three">
                                    <template #title>
                                        {{ $t('basics.myFavorite') }}
                                        <span>{{ customerNum }}</span>
                                    </template>
                                </a-tab-pane>
                            </a-tabs>
                        </div>
                        <div
                            v-if="records.length"
                            class="listmap h100"
                            @scroll="handleScroll"
                        >
                            <div
                                class="panellist w100"
                                v-for="(item, index) in records"
                                :key="index"
                                :class="infostatus == index ? 'tabcor' : ''"
                                @click="changtab(item, index)"
                            >
                                <div
                                    style="justify-content: space-between"
                                    class="flex alcen infolistmap gap-3"
                                >
                                    <div
                                        style="
                                            display: flex;
                                            align-items: center;
                                        "
                                    >
                                        <div class="avatar flex-shrink-0">
                                            <img
                                                :src="`${$url}gms.jpg`"
                                                v-if="item.is_customer_service"
                                                alt=""
                                            />
                                            <img
                                                :src="`${$url}${item.avatar_id}.jpg`"
                                                v-else
                                                alt=""
                                            />
                                        </div>
                                        <div
                                            style="
                                                justify-content: space-between;
                                            "
                                            class="flex-1 flex centeinfo"
                                        >
                                            <div class="sz16 font_bo">
                                                {{ item.target_phone_number }}
                                            </div>
                                            <div class="sz14 cocc ellipsis">
                                                {{ item.last_message_content }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="h-full sz12 infotime cocc flex">
                                        <span
                                            class="h-full leading-5"
                                            style="height: 22px"
                                            v-if="item.updated_at"
                                            >{{
                                                item.updated_at
                                                    .split('-')
                                                    .slice(-2)
                                                    .join('-')
                                            }}</span
                                        >
                                        <div
                                            class="icon_box"
                                            v-if="activeName == 1"
                                        >
                                            <!-- 列表收藏按钮 -->
                                            <div
                                                class="favorite_icon"
                                                @click.stop="setFavorite(item)"
                                            >
                                                <icon-star-fill
                                                    v-if="item.is_favorite == 1"
                                                    style="color: yellow"
                                                />
                                                <icon-star v-else />
                                            </div>
                                            <div
                                                class="unread-count"
                                                v-if="item.num_of_unread > 0"
                                            >
                                                {{ item.num_of_unread }}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            v-else
                            class="w100 flex jucen zujl"
                            style="justify-content: center"
                        >
                            <div>
                                <img src="@/assets/images/zwhh.png" alt="" />
                                <div
                                    style="text-align: center"
                                    class="w100 center mt10"
                                >
                                    {{ $t('basics.zanwuduihua') }}
                                </div>
                            </div>
                        </div>
                    </div>
                </a-spin>
            </div>
            <!-- v-if="other" -->
            <!-- <p style="background: red">{{ other }}1</p> -->
            <div class="dialogbox-content-right" v-if="other">
                <div class="content-right-content flex flex-col">
                    <div class="content-right-header flex">
                        <div class="avatar">
                            <img :src="`${$url}${otherRemand}.jpg`" alt="" />
                        </div>
                        <div
                            class="phone flex leading-[20px] justify-center items-center"
                        >
                            {{ $t('basics.yu') }} &nbsp;
                            <span>{{ other }}&nbsp;&nbsp;</span>
                            <!-- <span class="">这里需要替换最后一次聊天时间</span> -->
                            {{ $t('basics.deliantian') }}
                        </div>
                    </div>
                    <div
                        class="panetop w100 flex h-[100% - 78px] flex-1"
                        style="height: calc(100% - 78px)"
                    >
                        <div
                            class="contents w100 flex-1"
                            ref="scrollableDiv"
                            @click="showEmojiList = false"
                        >
                            <div
                                class="w100 center sz12 mb5"
                                style="
                                    text-align: center;
                                    color: #ccc;
                                    font-family: PingFangSC-Medium;
                                    font-size: 14px;
                                    font-style: normal;
                                    font-weight: 500;
                                "
                            >
                                {{ $t('basics.zhanshi') }}
                            </div>
                            <div
                                class="w100"
                                v-for="(item, index) in datillist"
                                :key="index"
                            >
                                <div
                                    class="others flex"
                                    v-if="item.direction == 2"
                                >
                                    <div class="others_hander">
                                        <img
                                            :src="`${$url}gms.png`"
                                            v-if="item.is_customer_service"
                                            alt=""
                                        />
                                        <img
                                            class="rounded-full"
                                            :src="`${$url}${otherRemand}.jpg`"
                                            v-else
                                            alt=""
                                        />
                                    </div>
                                    <div class="w100">
                                        <div class="mb5 others_text">
                                            {{ item.message_time }}
                                        </div>
                                        <div
                                            class="chat_bubble"
                                            v-html="
                                                item.message_content.replace(
                                                    /\n/g,
                                                    '<br>'
                                                )
                                            "
                                        ></div>
                                    </div>
                                </div>
                                <div
                                    class="oneself flex rounded-full"
                                    v-if="item.direction == 1"
                                    :class="{ marginMes: item.status == 4 }"
                                >
                                    <div class="flex-1 flex flex-col items-end">
                                        <div
                                            class="flex ziyy w-full justify-end"
                                        >
                                            <div class="mb5 others_text">
                                                {{ item.message_time }}
                                            </div>
                                        </div>
                                        <div
                                            class="flex ziyy max-w-3xl w-full justify-end"
                                        >
                                            <!-- <div
                                                v-if="item.status == 4"
                                                class="bandSend"
                                            >
                                                <icon-exclamation-circle-fill
                                                    :size="22"
                                                    style="color: red"
                                                />
                                            </div> -->
                                            <div
                                                class="chat_bubble text-[14px]"
                                                v-html="
                                                    item.message_content.replace(
                                                        /\n/g,
                                                        '<br>'
                                                    )
                                                "
                                            ></div>
                                        </div>
                                    </div>
                                    <div
                                        class="others_hander flex-shrink-0 rounded-full"
                                    >
                                        <img
                                            class="rounded-full w-full h-[40px]"
                                            src="@/assets/images/2.jpg"
                                            alt=""
                                        />
                                    </div>
                                    <!-- <div
                    @click="addMessage(item)"
                    v-if="item.status == 4"
                    class="oneself-tips text-[#F85E65] justify-center items-center error-tips-info"
                    :class="{'is-show-info': item.status != 4, '': item.status == 4}"
                  >
                    <div
                      class="bg-[#F85E65] text-[14px] bg-opacity-50 flex py-[5px] px-[10px] rounded-[10px]"
                      v-show="isClose"
                    >
                      {{ $t("basics.CustomerService") }}
                      <img
                        class="ml-[7px] text-[0px]"
                        src="@/assets/images/Framejt.png"
                      />
                    </div>
                  </div> -->
                                </div>
                            </div>
                            <div
                                style="padding-top: 10px"
                                v-if="
                                    Number(activeObj.is_reply) === 1 &&
                                    Number(activeObj.is_customer_service) ===
                                        0 &&
                                    Number(
                                        config_value.customer_service_switch
                                    ) === 1 &&
                                    datillist.find(
                                        (item) => Number(item.status) === 4
                                    )
                                "
                            >
                                <div
                                    @click="addMessage(activeObj)"
                                    style="display: flex; cursor: pointer"
                                    class="oneself-tips text-[#F85E65] justify-center items-center error-tips-info"
                                >
                                    <div
                                        class="bg-[#F85E65] text-[14px] bg-opacity-50 flex py-[5px] px-[10px] rounded-[10px]"
                                    >
                                        {{ $t('basics.CustomerService') }}
                                        <img
                                            class="ml-[7px] text-[0px]"
                                            src="@/assets/images/Framejt.png"
                                        />
                                    </div>
                                </div>
                            </div>
                            <div
                                v-if="
                                    Number(activeObj.is_reply) === 1 &&
                                    Number(activeObj.is_customer_service) ===
                                        0 &&
                                    Number(
                                        config_value.is_force_customer_service
                                    ) === 1
                                "
                                style="padding-top: 10px"
                            >
                                <!-- v-if="
                                        activeObj.is_reply === 1 &&
                                        activeObj.is_customer_service === 0 &&
                                        is_force_customer_service === 1
                                    " -->
                                <div
                                    @click="addMessage(activeObj)"
                                    style="display: flex; cursor: pointer"
                                    class="oneself-tips text-[#F85E65] justify-center items-center error-tips-info"
                                >
                                    <div
                                        class="bg-[#F85E65] text-[14px] bg-opacity-50 flex py-[5px] px-[10px] rounded-[10px]"
                                    >
                                        {{ $t('basics.qingjinrukefuxitong') }}
                                        <img
                                            class="ml-[7px] text-[0px]"
                                            src="@/assets/images/Framejt.png"
                                        />
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            v-if="showEmojiList"
                            class="emoji-list"
                            :style="`top:${emojiListclientY}px;`"
                        >
                            <span
                                v-for="emoji in faceList"
                                :key="emoji"
                                @click="addEmoji(emoji)"
                                >{{ emoji }}</span
                            >
                        </div>
                        <div class="footer flex">
                            <div class="sendtitle flex alcen">
                                <div
                                    class="sendiconlist flex alcen jucen cursor"
                                    @click.stop="toggleEmojiList"
                                >
                                    <a-tooltip
                                        class="item"
                                        effect="dark"
                                        :content="$t('basics.emo')"
                                        :open-delay="500"
                                        position="bottom"
                                    >
                                        <img
                                            src="@/assets/images/表情.png"
                                            alt=""
                                        />
                                    </a-tooltip>
                                </div>
                                <div
                                    class="sendiconlist flex alcen jucen cursor"
                                    @click="popupVisible = true"
                                >
                                    <a-tooltip
                                        class="item"
                                        effect="dark"
                                        :content="$t('basics.first_reply')"
                                        :open-delay="500"
                                        position="bottom"
                                    >
                                        <img
                                            src="@/assets/images/chat1.png"
                                            @click="getQuickReply(1)"
                                            alt=""
                                        />
                                    </a-tooltip>
                                </div>
                                <!-- @click="toggleEmojiList" //预留icon位置     -->

                                <div
                                    class="sendiconlist flex alcen jucen cursor"
                                    @click="popupVisible = true"
                                >
                                    <a-tooltip
                                        class="item"
                                        effect="dark"
                                        :content="$t('basics.second_reply')"
                                        :open-delay="500"
                                        position="bottom"
                                    >
                                        <img
                                            src="@/assets/images/Group21.png"
                                            @click="getQuickReply(2)"
                                            alt=""
                                        />
                                    </a-tooltip>
                                </div>
                                <!-- <div class="sendiconlist flex alcen jucen cursor" >
                        <a-tooltip
                          class="item"
                          effect="dark"
                          :content="$t('basics.kuaijieyu')"
                          :open-delay="500"
                          position="bottom"
                        >
                          <img @click="popupVisible = !popupVisible" src="@/assets/images/Frame.png" alt="" />
                        </a-tooltip>
                      </div> -->

                                <div
                                    class="sendiconlist flex alcen jucen cursor"
                                    @click="popupVisible = true"
                                >
                                    <a-tooltip
                                        class="item"
                                        effect="dark"
                                        :content="$t('basics.BeCommon')"
                                        :open-delay="500"
                                        position="bottom"
                                    >
                                        <img
                                            @click="getQuickReply(0)"
                                            src="@/assets/images/Group31.png"
                                            alt=""
                                        />
                                    </a-tooltip>
                                </div>
                                <!-- <template #content>
                    <ul class="quick-reply">
                      <li
                        class="quick-reply-item"
                        v-for="(item, index) in quickReplyList"
                        :key="index"
                        @click="quickSend(item)"
                      >
                        {{ item.reply_content }}
                      </li>
                    </ul>
                  </template> -->

                                <!-- <div
                                    class="sendiconlist flex alcen jucen cursor"
                                >
                                    <a-tooltip
                                        class="item"
                                        effect="dark"
                                        :content="$t('basics.sendNum')"
                                        :open-delay="500"
                                        position="bottom"
                                    >
                                        <a-switch
                                            v-model="switchStatus"
                                            :checked-value="1"
                                            :unchecked-value="2"
                                            :style="`background:${
                                                switchStatus == 1 ? 'blue' : ''
                                            };`"
                                        />
                                    </a-tooltip>
                                </div> -->
                                <!-- <div class="sendiconlist flex alcen jucen cursor">
                        <a-tooltip
                          class="item"
                          effect="dark"
                          content="图片"
                          :open-delay="500"
                          position="bottom"
                        >
                        <a-upload
                            action="/"
                            :fileList="file ? [file] : []"
                            :show-file-list="false"
                            @change="onChange"
                            @progress="onProgress"
                            accept=".PNG,.JPEG,GIF"
                            :custom-request="upload"
                          >
                        <template #upload-button>
                          <img src="@/assets/images/图片.png" alt="" />
                        </template>
                      </a-upload>
                        </a-tooltip>
                      </div> -->
                                <!-- <div class="sendiconlist flex alcen jucen cursor">
                        <a-tooltip
                          class="item"
                          effect="dark"
                          content="链接"
                          :open-delay="500"
                          position="bottom"
                        >
                          <img src="@/assets/images/链接.png" alt="" />
                        </a-tooltip>
                      </div> -->
                                <!-- <div class="sendiconlist flex alcen jucen cursor">
                        <a-tooltip
                          class="item"
                          effect="dark"
                          content="文件"
                          :open-delay="500"
                          position="bottom"
                        >
                          <img src="@/assets/images/文件.png" alt="" />
                        </a-tooltip>
                      </div> -->
                                <!-- <div class="sendiconlist flex alcen jucen cursor">
                        <a-tooltip
                          class="item"
                          effect="dark"
                          content="语音"
                          :open-delay="500"
                          position="bottom"
                        >
                          <img src="@/assets/images/电话.png" alt="" />
                        </a-tooltip>
                      </div> -->
                            </div>
                            <div
                                style="padding: 0 10px 10px"
                                class="flex-1 sendxinfo"
                            >
                                <!-- <a-input
                        type="textarea"
                        :rows="8"
                        placeholder="按回车发送"
                        v-model="text"  
                      >
                      </a-input> -->
                                <textarea
                                    class="chat-txtarea h-auto w-full outline-none rounded-2xl p-4"
                                    :placeholder="$t('basics.warnText')"
                                    :disabled="
                                        activeObj.is_reply === 1 &&
                                        activeObj.is_customer_service === 0 &&
                                        config_value.is_force_customer_service ===
                                            1
                                    "
                                    v-model="text"
                                    style="word-break: break-all; height: 130px"
                                    @input="textareaInput"
                                    @keydown.enter="handleKeyUp"
                                    @focus="hideBtn()"
                                    @blur="btnshow = true"
                                />
                                <div
                                    class="sending h-[36px] top-2/4 -translate-y-2/4"
                                    v-show="btnshow"
                                >
                                    <a-button
                                        v-if="
                                            activeObj.is_reply === 1 &&
                                            activeObj.is_customer_service ===
                                                0 &&
                                            config_value.is_force_customer_service ===
                                                1
                                        "
                                        type="info"
                                        size="large"
                                        style="background: #909399"
                                        >{{
                                            $t('basics.sendMessage')
                                        }}</a-button
                                    >
                                    <a-button
                                        v-else
                                        type="primary"
                                        size="large"
                                        style="background: #4780ff"
                                        @click="sendinfo"
                                        >{{
                                            $t('basics.sendMessage')
                                        }}</a-button
                                    >
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- <div v-else></div> -->
        </div>
        <div
            v-show="popupVisible"
            @click.stop="popupVisible = false"
            class="absolute w-full h-full z-20 left-0 top-0"
        >
            <div
                class="w-[40%] flex flex-col h-[40%] pt-[48px] px-[30px] rounded-[20px] bg-[rgba(47,55,68,0.8)] shadow-[0px_0px_20px_4px_rgba(191,212,255,0.25)] absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
            >
                <div
                    class="border-b border-[#b7cdff24] flex px-[30px] pb-[15px] items-center gap-[10px] justify-around"
                >
                    <div class="flex gap-[15px] items-center">
                        <!-- <div class="text-[0px]">
                        <img class="w-[40px] h-[40px]" src="@/assets/images/ic_pop_xuanze.png" />
                    </div> -->
                        <div
                            class="text-[#fff] text-[18px] font-normal leading-5"
                        >
                            {{ $t(txt) }}
                        </div>
                    </div>
                    <!-- <div>
                        <img class="w-[40px] h-[40px] text-[0px]" src="@/assets/images/ic_pop_xuanzechenggo.png" />
                    </div> -->
                </div>

                <!-- 内容渲染列表 -->
                <div
                    class="flex-1 flex flex-col py-[10px] px-[10px] gap-3 overflow-y-auto"
                >
                    <div
                        v-for="(item, index) in quickReplyList"
                        :key="index"
                        @click="quickSend(item)"
                    >
                        <div
                            style="word-break: break-all"
                            class="py-2 whitespace-pre-wrap px-3 text-[#fff] rounded-[10px] transition-all duration-75 hover:bg-[#474A52] hover:cursor-pointer"
                        >
                            {{ item.reply_content }}
                        </div>
                    </div>
                    <!-- <div>
                        <div class="inline-block py-2 px-3 bg-[#474A52] text-[#fff] rounded-[10px] transition-all duration-75 hover:bg-[#7e8581b4] ">内容内容</div>
                    </div> -->
                </div>
                <!-- <div class="py-[12px] flex justify-end">
                    <button class="  bg-[#2C6DFF] px-[15px] py-[5px] text-[#fff] rounded-[5px]">确定</button>
                 </div> -->
            </div>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref, getCurrentInstance, nextTick } from 'vue';
import {
    getProjectList,
    getConversaionProject,
    getConversaionDetail,
    sendMessage,
    getNumOfUnread,
    clearUnread,
    getConversaionProjectAdmin,
    getConversaionDetailAdmin,
    sendMessageAdmin,
    getNumOfUnreadAdmin,
    clearUnreadAdmin,
    createConversaion,
    getConfig
} from '@/api/america/dialogbox.js';

import { getProjectId } from '@/api/cloud/userProject.js';
import { getQuickReplyList } from '@/api/america/quickReply.js';
import dayjs from 'dayjs';
import appData from '@/assets/images/emojis.json';
import appDataTwo from '@/assets/images/emojistwo.json';
import emos from './emo.json';
import { useRouter, useRoute } from 'vue-router';

import commonApi from '@/api/common';
import { Message } from '@arco-design/web-vue';
import { useI18n } from 'vue-i18n';
import { useUserStore } from '@/store';
import tool from '@/utils/tool';
import { $request } from '@/utils/request.js';

const user = useUserStore().user;

const { t } = useI18n();

const switchStatus = ref(0);
// const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
// const tabchange = ref(-1);
// const input = ref('');
const infostatus = ref(-1);
// const isLoading = ref(true);
const text = ref('');
const userId = ref('');
const activeKey = ref('second');
const pageNum = ref(1);
// const pageSize = ref(100);
const mobileNum = ref(null);
// const communicating = ref(1);
const records = ref([]);
const datillist = ref([]);
const faceList = ref([]);
// const othername = ref('');
const other = ref('');
const conversationid = ref('');
// const myphonenumber = ref(null);
// const projectlist = ref([{ project_name: '美国短信' }]);
const shertop = ref(null);
// const titlstatus = ref(0);
const ProjectId = ref(null);
const sum = ref(0);
// const isClose = ref();
const showEmojiList = ref(false);
const showloading = ref(false);
const activeName = ref(1);
const collection = ref(null); //我的收藏列表
// const iphonelist = ref([]);
const scrollableDiv = ref('');
const popover = ref('');
const popupVisible = ref(false);
const faceListTwo = ref([]);
const quickReplyList = ref([]);
const newId = ref();
const EveryTime = ref(true);
const btnshow = ref(true);
const imgIcon = ref(
    `<img style="height:24px;display: inline-block;" src=/src/assets/dh.png />`
);
const hideBtn = () => {
    btnshow.value = false;
    showEmojiList.value = false;
};
const emojiListclientY = ref(500);
// const btnshwo = ref(true);
if (route.query.id) {
    userId.value = route.query.id;
    conversationid.value = route.query.id;
}
const otherRemand = ref();
// const onlyRemand = Math.floor(Math.random() * 8) + 1;
// const refresh = () => {
//     datillist.value = [];
//     console.log('22222222222222222222222');
//     other.value = '';
//     records.value = [];
//     pageNum.value = 1;
//     getConversaionList();
// };

const emoswitch = ref(0);

const getByKey = () => {
    $request
        .get('/cloud/config/getByKey', { config_key: 'is_rand_emoji' })
        .then(({ config_value }) => {
            emoswitch.value = config_value.switch;
            // console.log('==========', emoswitch.value);
        });
};

getByKey();

// 控制防抖
const isSend = ref(false);
// 获取美国项目id
const getId = () => {
    showloading.value = true;
    getProjectId({ project_key: 'america' }).then((res) => {
        showloading.value = false;
        ProjectId.value = res.data.id;
        getQuickReply();
        getConversaionList();
        getNumOf();
    });
};
getId();
//获取未读短信数量
const getNumOf = () => {
    if (userId.value) {
        getNumOfUnreadAdmin({
            project_id: ProjectId.value,
            user_id: userId.value
        }).then((res) => {
            sum.value = res.data.total_num_of_unread;
        });
    } else {
        getNumOfUnread({ project_id: ProjectId.value }).then((res) => {
            sum.value = res.data.total_num_of_unread;
        });
    }
};
nextTick(() => {
    const imageRemand = ref('');
});
const txt = ref('basics.common_reply');
const getQuickReply = (item) => {
    quickReplyList.value = [];
    if (item == 0) {
        txt.value = 'basics.common_reply';
    } else if (item == 1) {
        txt.value = 'basics.first_reply';
    } else {
        txt.value = 'basics.second_reply';
    }
    getQuickReplyList({
        project_id: ProjectId.value,
        page: 1,
        reply_type: item,
        pageSize: 1000
    }).then((res) => {
        quickReplyList.value = res.data.items;
    });
};

const loadings = ref(false);

/**导出有回复对话*/
const importAcc = () => {
    loadings.value = true;
    Message.info(t('basics.qingqiuxiazai'));

    const url = 'client/userTaskDetail/exportReply';
    if (/^(http|https)/g.test(url)) {
        window.open(url);
    } else {
        //visible.value = false;
        // console.log(userId.value || user.id, user);
        commonApi
            .download(url, 'get', {
                user_id: userId.value || user.id
            })
            .then((res) => {
                if (res && !res.message) {
                    loadings.value = false;
                    tool.download(res);
                    Message.success(t('basics.qingqiuchenggong'));
                } else {
                    proxy.$message.error(t('basics.meiyoukedaochudeshuju')); //t("basics.shujubucunzai")
                }
            });
    }
};

// 获取项目列表
// const getProject = () => {
//   getProjectList().then((res) => {
//     projectlist.value = res.data.items
//   })
// }
// getProject()
// 切换项目
// const pojetchange = (item, index) => {
//     ProjectId.value = item.id;
//     titlstatus.value = index;
//     // this.getPhoneListapi();
//     tabchange.value = -1;
// };
// 全部
// const taball = (e) => {
//     tabchange.value = e;
//     mobileNum.value = null;
//     myphonenumber.value = null;
//     // this.getconversationlistmap();
// };
// const changstatus = (e, i) => {
//     tabchange.value = i;
//     mobileNum.value = e.mobileNum;
//     myphonenumber.value = e.myphonenumber;
//     // this.getconversationlistmap();
// };
const handleScroll = (event) => {
    const div = event.target;
    if (div.scrollHeight - div.scrollTop === div.clientHeight) {
        // 滚动条到达底部，执行你想要的操作
        if (records.value.length < tatol.value) {
            pageNum.value = pageNum.value + 1;
            // console.log(pageNum.value)
            getConversaionList();
        }
    }
};

//client/commonConversation/getNumOfUnread
// const customerNum = ref(0);
// const getCustomerserviceUnred = () => {
//     $request.get('/client/commonConversation/getNumOfUnread').then((res) => {
//         console.log(res);
//         customerNum.value = res.num;
//     });
// };
//getCustomerserviceUnred();
//const customer_service_type = ref('');
const config_value = ref({});
getConfig({}).then((res) => {
    console.log(res);
    config_value.value = res.data.config_value;
    // is_force_customer_service.value =
    //     res.data.config_value.is_force_customer_service;
    //customer_service_type.value = res.data.config_value.customer_service_type;
    //isClose.value = res.data.config_value.customer_service_switch;
});
const activeObj = ref({});
const changtab = (e, index) => {
    activeObj.value = e;
    activeObj.value.conversation_id = e.id;
    newId.value = 0;
    showEmojiList.value = false;
    if (e.is_customer_service) {
        otherRemand.value = 'gms';
    } else {
        otherRemand.value = e.avatar_id;
    }

    conversationid.value = e.id;
    infostatus.value = index;
    mobileNum.value = e.target_phone_number;
    other.value = e.target_phone_number;
    // changeReadingStatus({ conversation_id: e.id }).then(
    //   (res) => {}
    // );
    if (activeName.value == 1) {
        if (userId.value) {
            clearUnreadAdmin({ conversation_id: e.id }).then((res) => {
                e.num_of_unread = 0;
                getNumOf();
            });
        } else {
            clearUnread({ conversation_id: e.id }).then((res) => {
                e.num_of_unread = 0;
                getNumOf();
            });
        }
    }
    if (activeName.value === 2) {
        $request
            .post('/client/commonConversation/clearUnread', { con_id: e.id })
            .then((res) => {
                e.num_of_unread = 0;
                getCustomerserviceUnred();
            });

        $request
            .get('/client/commonConversation/getTcardMessageList', {
                conversation_id: e.id
            })
            .then(({ items }) => {
                datillist.value = items.map((n) => {
                    return {
                        ...n,
                        message_content:
                            n.direction === 2
                                ? n.message_content.replace(
                                      'Missed call from',
                                      imgIcon.value
                                  )
                                : n.message_content
                    };
                });
                nextTick(() => {
                    const scrollDiv = proxy.$refs['scrollableDiv'];
                    scrollDiv.scrollTop = scrollDiv.scrollHeight;
                });
            });
        return;
    }
    if (userId.value) {
        getConversaionDetailAdmin({ conversation_id: e.id }).then((res) => {
            datillist.value = res.data.map((n) => {
                return {
                    ...n,
                    message_content:
                        n.direction === 2
                            ? n.message_content.replace(
                                  'Missed call from',
                                  imgIcon.value
                              )
                            : n.message_content
                };
            });
            if (res.data) {
                // 确保消息加载完成后滚动到最新消息
                nextTick(() => {
                    const scrollDiv = proxy.$refs['scrollableDiv'];
                    scrollDiv.scrollTop = scrollDiv.scrollHeight;
                });
            }
        });
    } else {
        getConversaionDetail({ conversation_id: e.id }).then((res) => {
            datillist.value = res.data.map((n) => {
                return {
                    ...n,
                    message_content:
                        n.direction === 2
                            ? n.message_content.replace(
                                  'Missed call from',
                                  imgIcon.value
                              )
                            : n.message_content
                };
            });
            if (res.data) {
                // 确保消息加载完成后滚动到最新消息
                nextTick(() => {
                    const scrollDiv = proxy.$refs['scrollableDiv'];
                    scrollDiv.scrollTop = scrollDiv.scrollHeight;
                });
            }
        });
    }
};
const tatol = ref();
const mychats = ref(0); //会话条数
// 获取对话列表
const getConversaionList = async () => {
    // datillist.value = [];
    // other.value = '';
    // records.value = [];
    // pageNum.value = 1;
    showloading.value = true;
    let data = {
        user_id: userId.value,
        project_id: ProjectId.value,
        is_reply: activeName.value,
        is_favorite: collection.value == 1 ? 1 : null,
        target_phone_number: shertop.value,
        pageSize: 20,
        page: pageNum.value
    };
    console.log('data', data);
    if (userId.value) {
        // data.is_reply = "";
        //查询管理员
        await getConversaionProjectAdmin(data)
            .then((res) => {
                if (data.is_reply == 1 && data.is_favorite != 1) {
                    mychats.value = res.data.pageInfo.total;
                }
                tatol.value = res.data.pageInfo.total;

                records.value.push(...res.data.items);

                nextTick(() => {
                    records.value.forEach((item) => {
                        item.otherRemand = Math.floor(Math.random() * 8) + 1;
                    });
                });

                showloading.value = false;
            })
            .catch(() => {
                showloading.value = false;
            });
    } else {
        await getConversaionProject(data)
            .then((res) => {
                if (data.is_reply == 1 && data.is_favorite != 1) {
                    mychats.value = res.data.pageInfo.total;
                }
                tatol.value = res.data.pageInfo.total;
                // datillist.value = []
                // records.value = res.data.items;
                records.value.push(...res.data.items);

                records.value.map((items, index) => {
                    if (newId.value == items.id) {
                        // other.value = items.target_phone_number;
                        infostatus.value = index;

                        // conversationid.value = item.id;
                        // mobileNum.value = items.target_phone_number;
                    }
                });
                // console.log(records.value)

                showloading.value = false;
            })
            .catch(() => {
                showloading.value = false;
            });
    }
    loadStatus.value = false;
};
const handleClick = (params) => {
    other.value = null;
    activeKey.value = params;
    datillist.value = [];
    // other.value = "";
    records.value = [];
    pageNum.value = 1;
    if (params == 'first') {
        activeName.value = 0;
        collection.value = null;
    } else if (params == 'second') {
        activeName.value = 1;
        collection.value = null;
    } else if (params == 'three') {
        activeName.value = 1;
        collection.value = 1;
        // other.value = activeObj.value.target_phone_number;
        // getCustomerservice();
        // return;
    }
    getConversaionList();
    // this.getconversationlistmap();
};
/**添加搜藏 */
const setFavorite = (e) => {
    let isFavorite = e.is_favorite;
    $request
        .post('/client/conversaion/setFavorite', {
            id: e.id,
            is_favorite: isFavorite == 1 ? 0 : 1
        })
        .then((res) => {
            if (res) {
                let idx = records.value.findIndex((item) => item.id == e.id);
                records.value[idx].is_favorite = isFavorite == 1 ? 0 : 1;
                Message.success(t('basics.controlsSecc'));
            } else {
                Message.error(t('basics.controlsError'));
            }
        });
};
// const getCustomerservice = () => {
//     showloading.value = true;
//     $request
//         .get('/client/commonConversation/getList', {
//             user_id: userId.value || user.id
//         })
//         .then(({ items, pageInfo }) => {
//             tatol.value = pageInfo.total;
//             let lists = items.map((i, index) => {
//                 if (newId.value == i.id) {
//                     infostatus.value = index;
//                 }
//                 return {
//                     ...i,
//                     target_phone_number: i.target_phonenumber
//                 };
//             });
//             records.value.push(...lists);
//         });
// };

const loadEmojis = () => {
    (faceList.value = appData), (faceListTwo.value = appDataTwo);
};
loadEmojis();
const toggleEmojiList = (e) => {
    emojiListclientY.value = e.clientY;
    showEmojiList.value = !showEmojiList.value;
};
const handleKeyUp = (e) => {
    if (e.key === 'Enter' && e.ctrlKey) {
        text.value += '\n';
    } else {
        if (!isSend.value) {
            e.returnValue = false;
            sendinfo();
            EveryTime.value = true;

            return false;
        } else {
            e.returnValue = false;
            return false;
        }
    }
};
const handleKeyDown = (e) => {
    // console.log(e,'Enter key pressed');
};

const addEmoji = (emoji) => {
    text.value += emoji;
    showEmojiList.value = false;
};
const loadStatus = ref(false);
const reLoad = () => {
    if (loadStatus.value) return;
    loadStatus.value = true;
    datillist.value = [];
    other.value = '';
    records.value = [];
    shertop.value = null;
    pageNum.value = 1;
    getConversaionList();
};

const sherhchange = () => {
    datillist.value = [];
    other.value = '';
    records.value = [];
    pageNum.value = 1;
    getConversaionList();
};
// const handleVisibleChange = (newVisible) => {
//     popupVisible.value = newVisible;
// };
// 快捷语发送
const quickSend = (item) => {
    text.value = item.reply_content;
    popupVisible.value = false;
};
// 自定义上传
const upload = (fileOption) => {
    // const dataForm = new FormData()
    // const { url, params } = props.upLoadData;
    // for (const key in params) {
    //   if (Object.hasOwnProperty.call(params, key)) {
    //     const element = params[key];
    //     dataForm.append(key, element);
    //   }
    // }
    // dataForm.append('file', fileOption.fileItem.file)
    // commonApi.importExcel(url, dataForm).then( async res => {
    //   res.success && Message.success(res.message || '导入成功')
    //   emit('success')
    //   close()
    // })
};
//     sherhchange() {
//       this.getconversationlistmap();
//     },
// 发送短信
function getRandomIntInclusive(min, max) {
    min = Math.ceil(min); // 确保min是整数
    max = Math.floor(max); // 确保max是整数
    return Math.floor(Math.random() * (max - min + 1)) + min; // 生成[min, max]的随机数
}

function getRandomIntExclusiveZero(x, n) {
    if (x <= 0 || n <= 0) {
        throw new Error('Both x and n must be greater than 0');
    }

    let result = Math.floor(Math.random() * (n - x + 1)) + x;
    // 确保结果不为0
    while (result === 0) {
        result = Math.floor(Math.random() * (n - x + 1)) + x;
    }
    return result;
}

function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
        // 生成一个0到i之间的随机索引
        const j = Math.floor(Math.random() * (i + 1));

        // 交换当前元素array[i]和随机索引j指向的元素
        [array[i], array[j]] = [array[j], array[i]];
    }

    return array;
}
function insertCharacterAtRandomSpace(str) {
    let index;
    let result = str;
    if (result.indexOf(' ') === -1) {
        return result;
    }
    // 生成一个在字符串长度范围内的随机索引
    if (result.length > 100) {
        //获取整段文字有空格的地方 []
        let spaceIndices = [...result.matchAll(/ /g)].map(
            (match) => match.index
        );
        //拿到数组的length 随机再lenght之内
        let Within_range = spaceIndices.length;
        let ceshu = getRandomIntExclusiveZero(1, Within_range || 1);
        //洗牌算法打乱数组
        let datadices = shuffleArray(spaceIndices);
        for (let i = 0; i < ceshu; i++) {
            // result.splice(datadices[i],)
            let mathNum = Math.floor(Math.random() * faceList.value.length);

            result =
                result.slice(0, datadices[i]) +
                faceList.value[mathNum] +
                result.slice(datadices[i] + 1);
        }
    }
    //   do {
    //     index = Math.floor(Math.random() * result.length);
    //   } while (result[index] !== " "); // 确保索引在空格字符上

    //   // 在随机空格处插入字符
    //   if (result.length > 100) {
    //     result =
    //       result.substring(0, index) +
    //       " " +
    //       charToInsert +
    //       " " +
    //       result.substring(index);
    //   }
    return result;
}
const textareaInput = () => {
    if (text.value.length > 360) {
        text.value = text.value.substring(0, 360);
    }
    if (text.value < 100) {
        EveryTime.value = true;
    }
    if (EveryTime.value) {
        if (switchStatus.value == 1 && text.value.length > 100) {
            if (Math.floor(Math.random() * (10 - 1 + 1)) + 1 == 2) {
                EveryTime.value = false;
                //随机的emoji表情
                let mathNum = Math.floor(Math.random() * faceList.value.length);

                let strnum = Math.floor(Math.random() * text.value.length);

                text.value =
                    text.value.slice(0, strnum) +
                    faceList.value[mathNum] +
                    text.value.slice(strnum);
            }
        }
    }
};

const sendinfo = () => {
    if (switchStatus.value == 1) {
        isSend.value = true;
        isSend.value = false;
    }
    // let strdh = 'Missed call from';
    // let imgsad = `<img style="height:24px;" src=/src/assets/dh.png />`;
    // if (text.value.includes(strdh)) {
    //     text.value = imgsad;
    // }
    //
    //   text.value = text.value.replace(new RegExp(strdh,'g'),imgsad)
    let mathNum = Math.floor(Math.random() * emos.length);
    let data = {
        user_id: userId.value,
        message_content: emoswitch.value
            ? Math.random() * 10 < 5
                ? text.value.trim() + emos[mathNum]
                : emos[mathNum] + text.value.trim()
            : text.value.trim(),
        conversation_id: conversationid.value
    };
    if (newId.value) {
        data.conversation_id = newId.value;
    } else {
        data.conversation_id = conversationid.value;
    }
    if (!data['message_content']) {
        return;
    }
    isSend.value = true;
    if (activeName.value === 2) {
        let params = {
            con_id: data.conversation_id,
            message_content: data.message_content
        };
        $request
            .post('/client/commonConversation/sendMessage', params)
            .then((res) => {
                isSend.value = false;
                text.value = '';
                const scrollDiv = proxy.$refs['scrollableDiv'];
                scrollDiv.scrollTop = scrollDiv.scrollHeight;
                $request
                    .get('/client/commonConversation/getTcardMessageList', {
                        conversation_id: params.con_id
                    })
                    .then(({ items }) => {
                        datillist.value = items.map((n) => {
                            return {
                                ...n,
                                message_content:
                                    n.direction === 2
                                        ? n.message_content.replace(
                                              'Missed call from',
                                              imgIcon.value
                                          )
                                        : n.message_content
                            };
                        });
                        nextTick(() => {
                            const scrollDiv = proxy.$refs['scrollableDiv'];
                            scrollDiv.scrollTop = scrollDiv.scrollHeight;
                        });
                    });
            });
        return;
    }
    if (userId.value) {
        // console.log('进入第一');
        sendMessageAdmin(data).then((res) => {
            isSend.value = false;
            text.value = '';
            const scrollDiv = proxy.$refs['scrollableDiv'];
            scrollDiv.scrollTop = scrollDiv.scrollHeight;
            getConversaionDetailAdmin({
                conversation_id: conversationid.value
            }).then((res) => {
                datillist.value = res.data.map((n) => {
                    return {
                        ...n,
                        message_content:
                            n.direction === 2
                                ? n.message_content.replace(
                                      'Missed call from',
                                      imgIcon.value
                                  )
                                : n.message_content
                    };
                });
                // this.datillist = res.data;
                if (res.data) {
                    // this.mobileNum = res.data[0].mobileNum
                    // this.othername = res.data[0].myphonenumber;
                    // this.other = res.data[0].other;
                    // 确保消息加载完成后滚动到最新消息
                    nextTick(() => {
                        const scrollDiv = proxy.$refs['scrollableDiv'];
                        scrollDiv.scrollTop = scrollDiv.scrollHeight;
                    });
                }
            });
        });
    } else {
        // console.log(newId.value, '第二', data);
        sendMessage(data).then((res) => {
            isSend.value = false;
            text.value = '';
            const scrollDiv = proxy.$refs['scrollableDiv'];
            scrollDiv.scrollTop = scrollDiv.scrollHeight;
            if (newId.value) {
                getConversaionDetail({ conversation_id: newId.value }).then(
                    (res) => {
                        datillist.value = res.data.map((n) => {
                            return {
                                ...n,
                                message_content:
                                    n.direction === 2
                                        ? n.message_content.replace(
                                              'Missed call from',
                                              imgIcon.value
                                          )
                                        : n.message_content
                            };
                        });
                        // this.datillist = res.data;
                        if (res.data) {
                            // this.mobileNum = res.data[0].mobileNum
                            // this.othername = res.data[0].myphonenumber;
                            // this.other = res.data[0].other;
                            // 确保消息加载完成后滚动到最新消息
                            nextTick(() => {
                                const scrollDiv = proxy.$refs['scrollableDiv'];
                                scrollDiv.scrollTop = scrollDiv.scrollHeight;
                            });
                        }
                    }
                );
            } else {
                getConversaionDetail({
                    conversation_id: conversationid.value
                }).then((res) => {
                    datillist.value = res.data.map((n) => {
                        return {
                            ...n,
                            message_content:
                                n.direction === 2
                                    ? n.message_content.replace(
                                          'Missed call from',
                                          imgIcon.value
                                      )
                                    : n.message_content
                        };
                    });
                    // this.datillist = res.data;
                    if (res.data) {
                        // this.mobileNum = res.data[0].mobileNum
                        // this.othername = res.data[0].myphonenumber;
                        // this.other = res.data[0].other;
                        // 确保消息加载完成后滚动到最新消息
                        nextTick(() => {
                            const scrollDiv = proxy.$refs['scrollableDiv'];
                            scrollDiv.scrollTop = scrollDiv.scrollHeight;
                        });
                    }
                });
            }
        });
    }
};
// 创建对话
const addMessage = (item) => {
    // activeObj.is_reply === 1 &&
    // activeObj.is_customer_service === 0 &&
    // is_force_customer_service === 1
    //config_value
    // console.log(item);
    // console.log(activeObj);
    if (
        activeObj.value.is_reply === 1 &&
        activeObj.value.is_customer_service === 0 &&
        config_value.value.is_force_customer_service === 1 &&
        config_value.value.customer_service_type === 'tcard'
    ) {
        let params = {
            // target_phone_number: other.value,
            // project_id: ProjectId.value,
            // old_conversation_id: item.conversation_id
            // old_con_id
            // old_con_type
            // target_phonenumber
            old_con_id: item.conversation_id,
            target_phonenumber: other.value,
            old_con_type:
                activeName.value === 0
                    ? 'tn'
                    : activeName.value === 1
                    ? 'tf'
                    : 'tcard'
        };
        $request
            .post('/client/commonConversation/create', params)
            .then((res) => {
                // console.log(records);
                if (res.id) {
                    activeObj.value.is_reply = res.is_reply;
                    newId.value = res.id;
                    records.value.map((i, index) => {
                        let items = {
                            ...i,
                            target_phone_number: i.target_phone_number
                        };
                        if (item.conversation_id == items.id) {
                            // console.log(
                            //     items,
                            //     '0-0--',
                            //     items.target_phone_number
                            // );
                            // console.log(records.value, 'ppp');
                            other.value = items.target_phone_number;
                            infostatus.value = index;
                            conversationid.value = item.id;
                            mobileNum.value = items.target_phone_number;
                            // console.log('1111111111111111', i);
                            // console.log('=================', other.value);
                            $request
                                .get(
                                    '/client/commonConversation/getTcardMessageList',
                                    {
                                        conversation_id: res.id
                                    }
                                )
                                .then(({ items }) => {
                                    datillist.value = items.map((n) => {
                                        return {
                                            ...n,
                                            message_content:
                                                n.direction === 2
                                                    ? n.message_content.replace(
                                                          'Missed call from',
                                                          imgIcon.value
                                                      )
                                                    : n.message_content
                                        };
                                    });
                                    if (items) {
                                        // 确保消息加载完成后滚动到最新消息
                                        nextTick(() => {
                                            otherRemand.value = res.avatar_id;
                                            // Math.floor(Math.random() * 8) +
                                            // 1;
                                            const scrollDiv =
                                                proxy.$refs['scrollableDiv'];
                                            scrollDiv.scrollTop =
                                                scrollDiv.scrollHeight;
                                        });
                                    }
                                });
                            // getConversaionDetail({ conversation_id: res.id }).then(
                            //     (res) => {
                            //         datillist.value = res.data;
                            //         if (res.data) {
                            //             // 确保消息加载完成后滚动到最新消息
                            //             nextTick(() => {
                            //                 otherRemand.value =
                            //                     Math.floor(Math.random() * 8) + 1;
                            //                 const scrollDiv =
                            //                     proxy.$refs['scrollableDiv'];
                            //                 scrollDiv.scrollTop =
                            //                     scrollDiv.scrollHeight;
                            //             });
                            //         }
                            //     }
                            // );
                        }
                    });
                    handleClick('three');
                }
            });
        return;
    }
    //

    // records.value.unshift({target_phone_number:other.value,otherRemand:otherRemand.value})
    createConversaion({
        target_phone_number: other.value,
        project_id: ProjectId.value,
        old_conversation_id: item.conversation_id
    }).then((res) => {
        if (res.data.id) {
            activeObj.value.is_reply = res.data.is_reply;
            newId.value = res.data.id;
            records.value.map((items, index) => {
                if (item.conversation_id == items.id) {
                    other.value = items.target_phone_number;
                    infostatus.value = index;
                    conversationid.value = item.id;
                    mobileNum.value = items.target_phone_number;

                    getConversaionDetail({ conversation_id: res.data.id }).then(
                        (res) => {
                            datillist.value = res.data.map((n) => {
                                return {
                                    ...n,
                                    message_content:
                                        n.direction === 2
                                            ? n.message_content.replace(
                                                  'Missed call from',
                                                  imgIcon.value
                                              )
                                            : n.message_content
                                };
                            });
                            if (res.data) {
                                // 确保消息加载完成后滚动到最新消息
                                nextTick(() => {
                                    otherRemand.value =
                                        Math.floor(Math.random() * 8) + 1;
                                    const scrollDiv =
                                        proxy.$refs['scrollableDiv'];
                                    scrollDiv.scrollTop =
                                        scrollDiv.scrollHeight;
                                });
                            }
                        }
                    );
                }
            });
            // 、、is_reply 0 1
            // 对话是否有回复;1是
            if (res.data.is_reply == 1) {
                // console.log('等于1 跳转群发');
                handleClick('first');
            } else {
                // console.log('等于0 跳转列表');
                handleClick('second');
            }
        }
    });
};
</script>
<style lang="less" scoped>
.fr {
    float: right;
}
.mr22 {
    margin-right: 22px;
}

.app-container {
    height: 100%;
    .dialogbox-content {
        display: flex;
        width: 100%;
        height: 100%;
        border-radius: 30px 15px 15px 15px;
        .dialogbox-content-left {
            max-width: 360px;
            min-width: 360px;
            padding: 10px;
            border-radius: 10px;
            background-color: @chat-bg-color;
            height: 100%;
            width: 35%;
            .arco-spin {
                width: 100%;
                height: calc(100% - 20px);
                overflow: hidden;
            }
            .content-left-header {
                width: 100%;
                padding: 16px 20px;
                background: #f9fafb;
                height: 64px;
                border-radius: 30px 0 0 0;
                display: flex;
                align-items: center;
                span {
                    margin-left: 40px;
                    font-size: 14px;
                    font-weight: 600;
                    cursor: pointer;
                }
            }
            .content-left-search {
                width: 100%;
                display: flex;
                padding: 10px 20px;
                height: 56px;
                .arco-input-wrapper {
                    border-radius: 12px;
                    background-color: #f9fafb;
                }
            }
            .content-left-conversation {
                width: 100%;
                height: calc(100% - 56px);
                .listmap {
                    width: 100%;
                    overflow: auto;
                    height: calc(100% - 95px);
                    .tabcor {
                        background-color: @rows-hover-bg-color;
                    }
                    .panellist:hover {
                        background-color: @rows-hover-bg-color;
                    }
                    .panellist:first-child {
                        margin-top: 0;
                    }
                    .panellist {
                        display: flex;
                        align-items: center;
                        border-radius: 10px;
                        width: 100%;
                        cursor: pointer;
                        margin-top: 10px;
                        .infolistmap {
                            width: 100%;
                            height: 100%;
                            padding: 10px 10px;
                            border-radius: 10px;
                            border-bottom: @infolistmap-color;
                            .avatar {
                                height: 40px;
                                width: 40px;
                                border-radius: 20px;
                                img {
                                    height: 100%;
                                    width: 100%;
                                    border-radius: 20px;
                                }
                            }
                            .centeinfo {
                                max-width: 160px;
                                max-width: 100px;
                                text-align: left;
                                flex-direction: column;
                                height: 40px;
                                padding-left: 10px;
                                .font_bo {
                                    width: 100%;
                                    color: @chat-row-color;
                                    font-family: PingFangSC-Medium;
                                    font-size: 14px;
                                    font-style: normal;
                                    font-weight: 700;
                                    padding: 1px 0;
                                    line-height: 17px;
                                }
                                .cocc {
                                    width: 100%;
                                    color: #7a7a7a;
                                    font-size: 12px;
                                    font-style: normal;
                                    font-weight: 400;
                                    line-height: 14px;
                                    overflow: hidden;
                                    padding: 1px 0;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                }
                            }
                            .infotime {
                                flex-direction: column;
                                justify-content: space-between;
                                height: 40px;
                                font-size: 12px;
                                .icon_box {
                                    width: 100%;
                                    overflow: hidden;
                                    .favorite_icon {
                                        float: right;
                                        margin-left: 5px;
                                        font-size: 20px;
                                        display: flex;
                                        border-radius: 50%;
                                        overflow: hidden;
                                        &:hover .arco-icon {
                                            color: yellow;
                                        }
                                    }
                                    .unread-count {
                                        background-color: #ff3742;
                                        align-self: center;
                                        align-items: center;
                                        border-radius: 16px;
                                        color: #fff;
                                        display: flex;
                                        font-size: 11px;
                                        font-weight: 700;
                                        height: 16px;
                                        justify-content: center;
                                        margin: 2px 0 2px auto;
                                        padding: 2px 5px 1px;
                                        width: 20px;
                                        float: right;
                                    }
                                }
                            }
                        }
                    }
                }
                .listmap::-webkit-scrollbar {
                    width: 7px;
                }

                .listmap::-webkit-scrollbar-thumb {
                    background: #ffffff10; /* 滚动条滑块颜色 */
                    border-radius: 4px; /* 滚动条滑块圆角 */
                }

                .listmap::-webkit-scrollbar-thumb:hover {
                    background: #ffffff50; /* 滚动条滑块 hover 状态颜色 */
                }
            }
        }
        .dialogbox-content-right {
            flex: 1;
            height: 100%;
            margin-left: 10px;
            .content-right-header {
                padding: 16px 20px;
                align-items: center;
                .avatar {
                    width: 40px;
                    height: 40px;
                }
                .phone {
                    height: 46px;
                    padding: 0 8px;
                    font-family: PingFangSC-Medium;
                    font-size: 14px;
                    font-style: normal;
                    font-weight: 700;
                }
            }
            .content-right-content {
                box-sizing: border-box;
                height: 100%;
                width: 100%;
                background: @chat-bg-color;
                border-radius: 10px;
            }
        }
    }
}
.zujl {
    padding: 50px 0;
}
// .colorTitle {
//     color: #fff !important;
// }
.panetop {
    flex-direction: column;
    .contents {
        padding: 0 20px 20px;
        max-width: calc(100% - 40px);
        overflow-y: auto;
        display: block;
        font-size: 0px;
        .others {
            max-width: 30%;
            display: flex;
            margin-bottom: 15px;
            .others_hander {
                width: 40px;
                flex-shrink: 0;
                margin-right: 10px;
                img {
                    width: 40px;
                }
            }
            .others_text {
                font-family: PingFangSC-Medium;
                font-size: 12px;
                font-weight: 400;
                line-height: 14px;
                color: #7a7a7a;
            }
            .chat_bubble {
                display: inline-block;
                word-wrap: break-word;
                position: relative;
                border-radius: 0 10px 10px 10px;
                height: auto;
                word-break: break-all;
                font-size: 15px;
                padding: 6px 10px;
                background: #2165ff;
                color: #fff;
                margin-top: 4px;
            }
        }

        .oneself {
            max-width: 100%;
            margin-bottom: 15px;
            justify-content: flex-end;
            position: relative;
            .oneself-tips {
                width: 100%;
                position: absolute;
                bottom: -50px;
                display: flex;
                cursor: pointer;
            }
            .others_hander {
                width: 40px;
                margin-left: 10px;
                img {
                    width: 40px;
                }
            }
            .others_text {
                font-family: PingFangSC-Medium;
                font-size: 12px;
                font-weight: 400;
                line-height: 14px;
                color: #7a7a7a;
            }
            .bandSend {
                display: flex;
                align-items: center;
                padding-right: 10px;
            }
            .chat_bubble {
                word-break: break-all;
                max-width: 60%;
                position: relative;
                border-radius: 10px 0 10px 10px;
                height: auto;
                padding: 6px 10px;
                color: #fff;
                background-color: #4e5969;
                margin-top: 4px;
            }
        }
        .marginMes {
            margin-bottom: 50px;
        }
    }

    .contents::-webkit-scrollbar {
        width: 0;
    }

    /* 滚动条轨道 */
    .contents::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    /* 滚动条滑块 */
    .contents::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 10px;
    }

    /* 滑块拖动时（活动状态） */
    .contents::-webkit-scrollbar-thumb:active {
        background: #555;
    }

    .footer {
        flex-direction: column;
    }
}
.sendtitle {
    padding: 10px;
    .sendiconlist {
        margin-right: 5px;
        color: #fff;
        img {
            width: 25px;
            height: 25px;
            margin-right: 5px;
        }
    }
}
.sendxinfo {
    position: relative;
    .arco-textarea-wrapper {
        border-radius: 20px;
        background-color: #333b48;
        color: white;
        padding: 5px 0 10px;
    }
    .sending {
        position: absolute;
        right: 20px;
        bottom: 0;
    }
}
.zujl {
    padding: 50px 0;
}
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 20px;
    img {
        width: 100%;
        height: 100%;
        border-radius: 20px;
    }
}
.emoji-list {
    position: absolute;
    width: 600px;
    background-color: white;
    border: 1px solid #ddd;
    padding: 10px;
    transform: translateY(-137%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.emoji-list span {
    cursor: pointer;
    font-size: 20px;
    margin: 5px;
}
.quick-reply {
    width: 400px;
    height: 200px;
    overflow: auto;
    .quick-reply-item {
        font-size: 16px;
        height: 50px;
        line-height: 50px;
        font-weight: 500;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .quick-reply-item:hover {
        background-color: #ddd;
    }
}
//标签下长灰线
::v-deep .ant-tabs-top > .ant-tabs-nav::before {
    border-bottom: none !important;
}
//标签蓝色下标
::v-deep .ant-tabs-ink-bar {
    background-color: white;
    display: none !important;
}
//标签激活状态样式
::v-deep .ant-tabs-tab-active {
    background-color: rgba(236, 242, 254, 1) !important; // 激活状态下的背景颜色
    color: #fff !important; // 激活状态下的文本颜色
    border-radius: 30px;
    padding: 10px;
    height: 28px;
}
::v-deep .arco-tabs-nav::before {
    content: '';
    display: none !important;
}
::v-deep .arco-tabs-tab-active {
    background-color: transparent;
}
::v-deep .arco-tabs-nav-tab-list {
    display: flex;
    justify-content: center;
}
::v-deep .arco-tabs-nav {
    background-color: transparent;
    border-radius: 16px;
}
::v-deep
    .arco-tabs-nav-type-line
    .arco-tabs-tab:hover
    .arco-tabs-tab-title::before {
    background-color: transparent;
}
::v-deep .arco-tabs-tab-title:hover .arco-tabs-tab-title::before {
    content: '';
    display: none;
    background-color: transparent !important;
}
::v-deep .arco-tabs-nav-tab-list {
    flex: 1;
}
::v-deep .arco-tabs-nav-tab {
    padding: 0px 0 10px;
}
//标签未激活状态样式
::v-deep .ant-tabs-tab {
    background-color: rgba(245, 245, 245, 1) !important;
    border-radius: 30px;
    padding: 10px;
    height: 28px;
    color: rgba(128, 128, 128, 1) !important;
}
::v-deep .arco-tabs-content {
    padding: 0;
}

.arco-form-item-status-error
    .arco-input-wrapper:not(.arco-input-disabled).arco-input-focus,
.arco-form-item-status-error
    .arco-textarea-wrapper:not(.arco-textarea-disabled).arco-textarea-focus {
    background-color: #363942 !important;
}
::v-deep
    .arco-form-item-status-error
    .arco-input-wrapper:not(.arco-input-disabled) {
    background-color: #363942 !important;
}

::v-deep
    .arco-form-item-status-error
    .arco-input-wrapper:not(.arco-input-disabled):hover {
    background: #363942 !important;
}

.dialog-foot {
    text-align: end;
}

.dialogbox-content-right {
    ::v-deep .arco-spin-loading,
    .arco-spin {
        display: flex;
        height: 100%;
        .arco-spin-mask {
            background: #000;
            opacity: 0.5;
        }
    }
}

.serch-input,
.arco-input-wrapper {
    background-color: @sinput-bg-color;
    color: @input-color;
}
.search-img {
    cursor: pointer;
    filter: @search-img-color;
    position: absolute;
    z-index: 10;
    left: 4px;
}
.rows-phone-number {
    color: @input-fill-color !important;
}
.record-info {
    color: @input-fill-color;
}

.chat-txtarea {
    background-color: @textarea-bg-color;
}

.cored {
    color: red;
}
</style>
